<template>
	<div class="main">
		<el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick">
    		<el-tab-pane label="用户头像" name="first">
    			<el-upload
				  	class="avatar-uploader"
				  	:action="baseURL"
				  	:show-file-list="false"
				  	:on-success="handleAvatarSuccess"
				  	:before-upload="beforeAvatarUpload">
				  	<img v-if="imageUrl" :src="imageUrl" class="avatar">
				  	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
    		</el-tab-pane>
    		<el-tab-pane label="重置密码" name="second">
    			<el-form ref="filterData" :model="filterData" :rules="filterDataRules" auto-complete="on" label-position="left">
					<div class="dialog">
						<div>
							<span class="dialog-name">原密码：</span>
							<el-form-item prop="password">
								<span class="dialog-msg"><el-input v-model="filterData.password" placeholder="原密码"></el-input></span>
							</el-form-item>
						</div>
						<div>
							<span class="dialog-name">新密码：</span>
							<el-form-item prop="newPassword">
								<span class="dialog-msg"><el-input v-model="filterData.newPassword" placeholder="新密码"></el-input></span>
							</el-form-item>
						</div>
						<div>
							<span class="dialog-name">确认新密码：</span>
							<el-form-item prop="rePassword">
								<span class="dialog-msg"><el-input v-model="filterData.rePassword" placeholder="确认新密码"></el-input></span>
							</el-form-item>
						</div>				
						<div class="btnBox">
							<el-button type="info" @click='reset'>重置</el-button>	
							<el-button type="success" @click='resetPass'>修改密码</el-button>					
						</div>
					</div>
				</el-form>
    		</el-tab-pane>    
 		</el-tabs>
		
	</div>
</template>

<script>
	import {safeRestPassword} from '@/api/common'
	export default {
		created() {
			
		},
		methods: {		
			handleClick(tab, event) {
        		//console.log(tab, event);
     		}, 
			handleAvatarSuccess(res, file) {
				console.log(res)
		        this.imageUrl = URL.createObjectURL(file.raw);
		    },
		    beforeAvatarUpload(file) {
		        const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
		
		        if (!isJPG && !isPNG) {
		          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
		        }
		        if (!isLt2M) {
		          this.$message.error('上传头像图片大小不能超过 2MB!');
		        }
		        return (isJPG && isPNG) && isLt2M;
		    },
			resetPass() {		
				this.$refs.filterData.validate(valid => {
					if(valid){
						safeRestPassword(this.filterData.password,this.filterData.newPassword).then(res =>{
							this.$message.success(res.msg)
						}).catch(res =>{
							this.$message.error(res.msg)
						})
					}
					else {
						console.log('请求错误!')
						return false
					}
				})				
			},
			reset(){
				this.filterData = {
					password:'',			//旧密码
					newPassword:'',			//新密码
					rePassword:'', 			//确认密码
				}
			},			
		},
		data() {
			const notNull = (rule, value, callback) => {
				if(value.length < 6 ) {
					callback(new Error('密码长度最少六位！'))
				} else {
					callback()
				}
			}
			const repeat = (rule, value, callback) => {
				if(value != this.filterData.newPassword) {
					callback(new Error('两次新密码不同！'))
				} else {
					callback()
				}
			}
			return {
				//主列表数据
				filterData: {
					password:'',			//旧密码
					newPassword:'',			//新密码
					rePassword:'', 			//确认密码   
				},
				filterDataRules:{
					password: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],	
					newPassword: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],
					rePassword: [{
						required: true,
						trigger: 'blur',
						validator: repeat
					}],
				},
				imageUrl: '',
				activeName2: 'first',
				baseURL: process.env.BASE_API + "/common/uploadImage",    // api 的 base_url
			}
		}
	}
</script>
<style>
	
	.dialog-name {
		width: 25%;
		display: inline-block;
	}
	
	.main {
		
	}
	.dialog {
		width:50%;
		margin:  0 auto;
	}
	.el-form-item {
		width:73%;
		display: inline-block;
	}
  	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
  	}
  	.avatar-uploader .el-upload:hover {
    	border-color: #409EFF;
  	}
  	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
  	}
  	.avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
  	}
</style>